<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">云算力</div>
    </div>
    <div class="banner">
      <Tabs type="card">
        <TabPane label="云算力二维码">
          <div class="search">
            <Input v-model="searchData.keyWord" style="width:200px" />
            <span style="margin-left:20px;font-size:20px">所属项目：</span>
            <Select v-model="searchData.project" style="width:200px;margin-left:5px;" @on-change="selectStatusFun">
              <Option :value="item.value" :label="item.label" v-for="(item,index) in searchData.selectStatusList" :key="index"></Option>
            </Select>
            <span style="margin-left:20px;font-size:20px">状态：</span>
            <Select v-model="searchData.stutas" style="width:200px;margin-left:5px;" @on-change="selectStatusFun">
              <Option :value="item.value" :label="item.label" v-for="(item,index) in searchData.stutas" :key="index"></Option>
            </Select>
            <Button @click="batchDown" style="margin-left:20px" type="primary">批量下载</Button>
            <Button @click="dowmQcode" style="margin-left:20px" type="primary">生成二维码</Button>
          </div>
          <div class="total">
            <span>当前云算力总额：8089 MB</span>
            <span style="margin-left:100px;">当前已领取云算力总额：3890 MB</span>
            <Table :columns="columnsData" :data="userShowData" :border="true" :loading="isLoading" :row-class-name="rowClassName">
              <template slot-scope="{ row, index }" slot="cashWallet">
                <Button>下载二维码</Button>
                <Button>立即失效</Button>
              </template>
            </Table>
            <Page :total="pageTotal" :current="pageNum" show-total placement="top" @on-change="handlePage" style="margin-top:20px;" :page-size="pageSize"></Page>
          </div>
        </TabPane>
        <TabPane label="云算力商城">
          <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js"
export default {
  name: "CloudPower",
  data() {
    return {
      columns1: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      columnsData: [
        {
          title: "ID",
          key: "id",
          align: "center",
          width: 120
        },
        {
          title: "批次号",
          key: "batchNo",
          align: "center",
          width: 120
        },
        {
          title: "生成时间",
          key: "createTime",
          align: "center",
          width: 120
        },
        {
          title: "云算力值",
          key: "computePowerCount",
          align: "center",
          width: 120
        },
        {
          title: "云算力有效期",
          key: "startTime",
          align: "center",
          width: 120
        },
        {
          title: "所属项目",
          key: "projectId",
          align: "center",
          width: 120
        },
        {
          title: "领取人",
          key: "user",
          align: "center",
          width: 120
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 120
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
          width: 120
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 250
        }

      ],
      userShowData: [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        },
      ],
      isLoading: false,
      pageTotal: 0,
      pageNum: 1,
      pageSize: 20,
      /////////////////搜索数据//////
      searchData: {
        keyWord: null,
        project: null,
        stutas: [
          {
            value: "1",
            label: "待领取"
          },
          {
            value: "2",
            label: "已领取"
          },
          {
            value: "3",
            label: "已失效"
          },
          {
            value: "4",
            label: "已停售"
          }
        ]
      },
    };
  },
  mounted() {
    this.tabeleData(0, "99");
    this.powTotalData();
  },
  methods: {
    rowClassName(row, index) {
      if (index === 1) {
        console.log("1")
        return "demo-table-info-row";
      } else if (index === 3) {
        console.log("3")
        return "demo-table-error-row";
      } else {
        return "";
      }

    },
    ////////////////////////////////////////搜索方法/////////////////////////
    selectStatusFun() { },
    handlePage() { },
    ///////////////////////////////////////二维码操作///////////////////////
    batchDown() { },
    dowmQcode() { },
    ////////////////////////////////////////数据获取////////////////////////////////
    ///////////表格相互据获取///////
    tabeleData(pageNum, status) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let payload = {};
      payload.page = pageNum;
      payload.size = this.pageSize;
      payload.status = status;
      let url = apis.qcodeListApi;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          console.log(res);
          if (res.status == "200") {

          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    /////////云算力统计//////////
    powTotalData() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let url = apis.powTotalApi;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        },
      })
        .then(res => {
          if (res.status == "200") {

          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
  }
};
</script>

<style scoped>
.wrapp {
  padding: 0 20px;
}
.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}
.banner {
  margin-top: 20px;
}
.title {
  color: #666;
  font-size: 24px;
}
.item {
  margin-top: 15px;
  display: flex;
  line-height: 36px;
}
.itemTitle {
  width: 250px;
  text-align: left;
  margin-right: 20px;
  font-size: 20px;
}
.foot {
  margin-top: 20px;
}
.total {
  font-size: 20px;
}
.search {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.ivu-table .demo-table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
</style>